<template>
  <div>
    <div>yyds</div>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div>{{ count }}</div>
    <button @click="asyncSetage(66)">Actionsage++</button>
    <button @click="increment(666)">count++</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: {},
  data() {
    return {
      a: 1,
    };
  },

  computed: {
    //用辅助函数拿到 vuex store的数据
    ...mapState(["name", "age", "count"]),
    // 初始写法
    // this.$store.state.name
  },
  created() {
    console.log(this.$store);
    console.log(mapMutations(["increment"]).increment);
  },
  mounted() {},
  watch: {},
  methods: {
    // 辅助函数 同步修改数据
    ...mapMutations(["increment"]),
    // 初始写法  点击事件调用函数
    // addfn() {
    //   this.$store.commit("increment", 60);
    // },

    // 辅助函数 异步修改数据
    ...mapActions(["asyncSetage"]),
    // 初始写法  点击事件调用函数
    // this.$store.dispatch("asyncSetage", 60)
  },
  components: {},
};
</script>

<style>
</style>
